<template>
  <div>
    <div class="personheader">
      <el-avatar shape="square" :size="80">
        {{ personform.account }}
      </el-avatar>
      <div class="settingmenu">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-setting">设置</i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">修改密码</el-dropdown-item>
            <el-dropdown-item command="2">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="personset">
      <el-form
        :disabled="formdisabled"
        :model="personform"
        ref="form"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="用户名">
          <el-input v-model="personform.account"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="personform.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="personform.sex" label="man">男</el-radio>
          <el-radio v-model="personform.sex" label="woman">女</el-radio>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input
            type="textarea"
            :rows="6"
            v-model="personform.text"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" size="default" @click="edit">编辑</el-button>
        <el-button v-if="button" size="default" @click="submit">确定</el-button>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="pwdVisible">
      <div class="dialogform">
        <!-- {{libraryitem}} -->
        <el-form
          :model="pwdform"
          ref="form"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="原密码">
            <el-input show-password v-model="pwdform.before"></el-input>
          </el-form-item>
          <el-form-item label="现密码">
            <el-input show-password v-model="pwdform.now"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input show-password v-model="pwdform.check"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="default" @click="pwdsubmit"
              >确认</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pwd: "1234",
      formdisabled: true,
      button: false,
      pwdVisible: false,
      pwdform: {
        before: "",
        now: "",
        check: "",
      },
      personform: {
        account: "11111111",
        name: "小红",
        sex: "man",
        text: "简介简介简介简介简介简介简介简介简介简介简介简介简介简介",
      },
    };
  },
  methods: {
    edit() {
      this.formdisabled = false;
      this.button = true;
    },
    submit() {
      this.formdisabled = true;
      this.button = false;
    },
    handleCommand(e) {
      switch (e) {
        case "1":
          this.pwdVisible = true;
          break;
        case "2":
          this.$router.replace({
            name: "login",
          });
          console.log(e);
          break;

        default:
          break;
      }
    },
    pwdsubmit() {
      var a;
      if (this.pwdform.before !== this.pwd) {
        this.$message({
          offset:100,
          type: "error",
          message: "密码错误，请重新输入",
        });
        a=0;
      }
      if (this.pwdform.check !== this.pwdform.now) {
        this.$message({
          type: "error",
          message: "密码确认错误，请重新输入",
        });
        a=0;
      }
      if (a!=0) {
         this.$message({
          type: "success",
          message: "修改成功",
        });
      this.pwdVisible=false;
        
      }
    },
  },
};
</script>

<style>
.personset {
  margin: 10px 10px;
  width: 60%;
}
.settingmenu {
  float: right;
}
</style>